<template>
  <div class="StrategyIndex">
    <div class="HomeTopBox">
      <div class="TopBox">
        <div class="name">青城攻略</div>
        <div class="englishName">TOUR PLAN</div>
      </div>
    </div>
    <div class="mainBox">
      <template v-for="(item, index) in dataList">
        <div class="itemBox" :key="index">
          <div class="ImgBox">
            <img :src="HostUrl+item.tripStrategyPic"/>
          </div>
          <div class="timeBox">{{item.tripStrategyTime}}</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import axios from '../../axios'
export default {
  name: 'HomePage',
  data () {
    return {
      imgList: [{
        pathUrl: '/Detail',
        imgUrl: require('../../assets/qingcheng/q2.png'),
        name: '青城前山',
        englishName: 'AGRITAINMENT'
      }, {
        pathUrl: '/Detail',
        imgUrl: require('../../assets/qingcheng/q3.png'),
        name: '青城后山',
        englishName: 'AGRITAINMENT'
      }, {
        pathUrl: '/Detail',
        imgUrl: require('../../assets/qingcheng/q4.png'),
        name: '农家乐',
        englishName: 'AGRITAINMENT'
      }],
      dataList: [],
      HostUrl: 'http://study.s1.natapp.cc/QingchengTravel/'
    }
  },
  methods: {
    jumpPage (obj) {
      this.$router.push({
        path: obj.pathUrl
      })
    },
    getData () {
      axios.get('/preview/TripStrategy/tranvelListForApp').then((res) => {
        this.dataList = res.data.map.list
        console.log(this.dataList)
      }).catch(function (err) {
        console.log(err)
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style scoped lang="scss">
  .StrategyIndex{
    width: 100%;
    height: auto;
    min-height: calc(100vh);
    background: #fff;
    padding-bottom: 1px;
    .clear {
      clear: both;
    }
    .HomeTopBox{
      width: 750px;
      height: 378px;
      padding-top: 125px;
      background: url("../../assets/strategy/topBg.png") no-repeat;
      background-size: 100% 100%;
      .TopBox {
        width: 232px;
        height: 114px;
        border: 3px solid #fff;
        border-radius: 5px;
        margin: 132px auto;
        color: #ffffff;
        font-weight: normal;
        font-stretch: normal;
        line-height: 33.3px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .name{
          font-family: MicrosoftYaHei;
          font-size: 33.3px;
          letter-spacing: 1.3px;
        }
        .englishName{
          font-family: MyriadPro-Regular;
          font-size: 25px;
          letter-spacing: 0.5px;
        }
      }
    }
    .mainBox{
      /*width: 100%;*/
      margin: 0 auto;
      padding: .2rem;
      .itemBox{
        display: inline-block;
        width: 328px;
        height: 254px;
        margin: 20px 15px;
        background: url("../../assets/strategy/bg.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        .ImgBox{
          margin: 10px 10px 38px 10px;
          width: 310px;
          height: 206px;
          background: red;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .timeBox{
          position: absolute;
          font-family: MicrosoftYaHei;
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 34px;
          letter-spacing: 0.4px;
          color: #ffffff;
          right: 15px;
          bottom: 3px;
        }
      }
    }
  }
</style>
